<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 响应式布局代码 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
		
		<!-- jQuery -->
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- popper -->
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 加载bootstrap css样式 -->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- 加载bootstrap js脚本 -->
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	
	
		<link href="css/font-awesome.min.css" rel="stylesheet"/>
		
		
		<style type="text/css">
			div{
				width: 100px;
				height: 50px;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<h1>hello world</h1>
		<p>这个是一段文字内容这个是一段文字内容这个是一段文字内容
		这个是一段文字内容这个是一段文字内容这个是一段文字内容
		这个是一段文字内容这个是一段文字内容这个是一段文字内容
		这个是一段文字内容这个是一段文字内容这个是一段文字内容
		这个是一段文字内容这个是一段文字内容这个是一段文字内容
		这个是一段文字内容这个是一段文字内容</p>
		
		
		<h1>1. 按钮</h1>
		<button>按钮</button>
		<!--
			btn 			bootstrap框架定义的按钮样式风格的类
			btn-primary 	
			btn-warning
			btn-danger
			btn-success
			btn-info
			btn-light
			btn-white
			btn-secondary
		-->
		<button class="btn btn-primary btn-lg">按钮</button>
		<button class="btn btn-warning btn-sm">按钮</button>
		<button class="btn btn-danger">按钮</button>
		<button class="btn btn-success">按钮</button>
		<button class="btn btn-info">按钮</button>
		<button class="btn btn-light">按钮</button>
		<button class="btn btn-white">按钮</button>
		<button class="btn btn-secondary">按钮</button>
		
		<h1>2. 背景颜色</h1>
		<div class="bg-black">11</div>
		<div class="bg-primary">11</div>
		<div class="bg-warning">11</div>
		
		<h1>3. 文本颜色</h1>
		<p class="text-danger">文本内容</p>
		
		<i class="fa fa-wechat" style="color: green;font-size: 50px;"></i>
		<button class="btn btn-secondary"><i class="fa fa-camera-retro bg-warning"></i>按钮</button>
	</body>
</html>
